<template>
  <div id="app">
    <el-row>
      <el-button>默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button> </el-row
    ><br />
    <el-row>
      <el-button plain>朴素按钮</el-button>
      <el-button type="primary" plain>主要按钮</el-button>
      <el-button type="success" plain>成功按钮</el-button>
      <el-button type="info" plain>信息按钮</el-button>
      <el-button type="warning" plain>警告按钮</el-button>
      <el-button type="danger" plain>危险按钮</el-button> </el-row
    ><br />

    <el-row>
      <el-button round>圆角按钮</el-button>
      <el-button disabled type="primary" round>主要按钮</el-button>
      <el-button type="success" round>成功按钮</el-button>
      <el-button type="info" round>信息按钮</el-button>
      <el-button type="warning" round>警告按钮</el-button>
      <el-button type="danger" round>危险按钮</el-button>
    </el-row>
    <br />
    <el-row>
      <el-button icon="el-icon-search" circle></el-button>
      <el-button type="primary" icon="el-icon-edit" circle></el-button>
      <el-button type="success" icon="el-icon-check" circle></el-button>
      <el-button type="info" icon="el-icon-message" circle></el-button>
      <el-button type="warning" icon="el-icon-star-off" circle></el-button>
      <el-button type="danger" icon="el-icon-delete" circle></el-button>
    </el-row>
    <br />
    <el-button type="text">文字按钮</el-button>
    <el-button type="text" disabled>文字按钮</el-button>
    <br />
    <el-button-group>
      <el-button type="primary" icon="el-icon-arrow-left">上一页</el-button>
      <el-button type="primary"
        >下一页<i class="el-icon-arrow-right el-icon--right"></i
      ></el-button> </el-button-group
    >&nbsp;&nbsp;&nbsp;&nbsp;
    <el-button-group>
      <el-button type="primary" icon="el-icon-edit"></el-button>
      <el-button type="primary" icon="el-icon-share"></el-button>
      <el-button type="primary" icon="el-icon-delete"></el-button>
    </el-button-group>
    <br />
    <br />
    <el-button type="primary" loading>加载中</el-button><br /><br />
    <hr />
    <div>
      <el-link href="https://element.eleme.io" target="_blank"
        >默认链接</el-link
      >
      <el-link type="primary">主要链接</el-link>
      <el-link type="success">成功链接</el-link>
      <el-link type="warning">警告链接</el-link>
      <el-link type="danger">危险链接</el-link>
      <el-link type="info">信息链接</el-link>
      <el-link type="primary" :underline="false">无下划线primary</el-link>
      <el-link type="success" :underline="false">无下划线success</el-link>
      <br /><br />
      <div>
        <el-link icon="el-icon-edit">编辑</el-link>&nbsp;&nbsp;&nbsp;&nbsp;
        <el-link>查看 <i class="el-icon-view"></i> </el-link>
      </div>
      <hr />
      <!-- Layout布局 -->
      <el-row>
        <el-col :span="24"><div class="style1">1</div></el-col>
      </el-row>
      <el-row>
        <el-col :span="12"><div class="style1">2</div></el-col>
        <el-col :span="12"><div class="style1">2</div></el-col>
      </el-row>
      <el-row>
        <el-col :span="8"><div class="style1">3</div></el-col>
        <el-col :span="8"><div class="style1">3</div></el-col>
        <el-col :span="8"><div class="style1">3</div></el-col>
      </el-row>
      <el-row>
        <el-col :span="6"><div class="style1">4</div></el-col>
        <el-col :span="6"><div class="style1">4</div></el-col>
        <el-col :span="6"><div class="style1">4</div></el-col>
        <el-col :span="6"><div class="style1">4</div></el-col>
      </el-row>
      <el-row>
        <el-col :span="4"><div class="style1">5</div></el-col>
        <el-col :span="4"><div class="style1">5</div></el-col>
        <el-col :span="4"><div class="style1">5</div></el-col>
        <el-col :span="4"><div class="style1">5</div></el-col>
        <el-col :span="4"><div class="style1">5</div></el-col>
        <el-col :span="4"><div class="style1">5</div></el-col>
      </el-row>
      <br /><br />
      <hr />
      <!-- Container容器布局  -->
      <el-container>
        <el-header>Header</el-header>
        <el-container>
          <el-aside width="200px">Aside</el-aside>
          <el-main>Main</el-main>
        </el-container>
      </el-container>
      <br><br><hr>
      <!-- 表单元素的使用 -->
      <!-- 一定要使用 v-model 绑定属性，文本框才可以输入内容 -->
      <el-input v-model="username" placeholder="请输入内容"></el-input>
      <!-- 在文本框的基础上添加show-password属性即可得到一个可切换显示隐藏的密码框 -->
      <el-input v-model="password" placeholder="请输入密码" show-password></el-input>

      <el-select v-model="value" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      username:'',
      password:'',
      options:[{value:'张洪瑞',label:'广州'},{value:'王美婷',label:'湛江'}]
    }
  },
};
</script>

<style>
.el-header,.el-footer {
  background-color: #b3c0d1;
}
.el-aside {
  background-color: #0966cf;
}

.el-main {
  background-color: #e02b0b;
}


#app {
  /* font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; */
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.style1 {
  background-color: aqua;
  border: 2px solid red;
}
</style>
